<template>
  <div class="bottom">
    <mt-tabbar >
      <router-link to="/" style="width: 33.3%;">
      <mt-tab-item id="外卖">
        <img slot="icon" src="../assets/images/index_1.png">
          新闻
      </mt-tab-item>
      </router-link>
      <router-link to="/shop" style="width: 33.3%;">
      <mt-tab-item id="订单">
        <img slot="icon" src="../assets/images/index_2.png">
          商品
      </mt-tab-item>
      </router-link>
      <router-link to="/car" style="width: 33.3%;">
      <mt-tab-item id="发现">
        <img slot="icon" src="../assets/images/index_3.png">
          购物车
      </mt-tab-item>
      </router-link>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.bottom{
  width: 100%;
  height: 55px ;
  position: fixed;
  bottom: 0;
}

</style>
